<!--
 * @Author: 小孩_晓孩 1534579168@qq.com
 * @Date: 2024-08-02 16:52:33
 * @LastEditors: 小孩_晓孩 1534579168@qq.com
 * @LastEditTime: 2024-08-12 10:22:45
 * @FilePath: \heima-shop\src\pages\index\index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<script setup lang="ts">
import { onLoad } from '@dcloudio/uni-app'
import CustomNavbar from './componets/CustomNavbar.vue'
import CategoryPanel from './componets/CategoryPanel.vue'
import HotPanel from './componets/HotPanel.vue'
import type { XtxGuessInstance } from '@/components/XtxGuess.vue'
import type { BannerItem, categoryItem, hotItem } from '@/types/home'
import { getHomeBannerAPI, getCategoryAPI, getHotPannelAPI } from './request'
import { useGuessList } from '@/composables/index'
import { ref } from 'vue'
const isTrigger = ref(false)
const bannerList = ref<BannerItem[]>([])
const catogoryList = ref<categoryItem[]>([])
const hotList = ref<hotItem[]>([])
// 猜你喜欢-通过组合式API来调用函数
const { XtxGuessRef, scrollToBottom } = useGuessList()
// 获取首页banner
const getHomeBanner = async () => {
  const res = await getHomeBannerAPI()
  bannerList.value = res.result
}
// 获取前台分类数据
const getCategory = async () => {
  const res = await getCategoryAPI()
  catogoryList.value = res.result
}
// 获取热门推荐
const getHotPannel = async () => {
  const res = await getHotPannelAPI()
  hotList.value = res.result
}
const onRefresh = async () => {
  // 首先先开启下拉刷新状态
  isTrigger.value = true
  // 重置猜你喜欢里面的数据，然后再调接口
  XtxGuessRef.value.resetData()
  // 当下拉刷新开启时就调接口，刷新数据
  // Promise.all就是将几个接口同时进行
  await Promise.all([getHomeBanner(), getCategory(), getHotPannel(), XtxGuessRef.value.initData()])
  // 接口请求完之后再关闭下拉刷新状态
  isTrigger.value = false
}
// 页面首次加载时的生命周期
onLoad(() => {
  getHomeBanner()
  getCategory()
  getHotPannel()
})
</script>

<template>
  <CustomNavbar></CustomNavbar>
  <scroll-view
    scroll-y
    @scrolltolower="scrollToBottom"
    refresher-enabled
    @refresherrefresh="onRefresh"
    :refresher-triggered="isTrigger"
  >
    <XtxSwiper :list="bannerList"></XtxSwiper>
    <CategoryPanel :list="catogoryList"></CategoryPanel>
    <HotPanel :list="hotList"></HotPanel>
    <XtxGuess ref="XtxGuessRef"></XtxGuess>
  </scroll-view>
</template>

<style lang="scss">
page {
  height: 100%;
  background-color: #f7f7f7;
  height: 100%;
}
</style>
